<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="./css/classify.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 最顶部 -->
        <div class="h_top">
            <div class="h_top1">
                <!-- 返回按钮 -->
            <a href="#"><div>Back</div></a>
            <span>分类</span>
            <!-- 地区 -->
            <div class="sel">
                <select name="" id="">
                    <option value="广州市">广州市</option>
                    <option value="深圳市">深圳市</option>
                    <option value="上海市">上海市</option>
                </select>
                <!-- 下拉框的三角形 -->
                <i></i>
            </div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="h_bt">
            <div>
                <a href="#">
                    <img src="./images/classify/美食.png" alt="">                   
                </a>
                <span>美食</span>
            </div>

            <div>
                <a href="#">
                    <img src="./images/classify/电影.png" alt="">                   
                </a>
                <span>电影</span>
            </div>

            <div>
                <a href="#">
                    <img src="./images/classify/运动.png" alt="">                   
                </a>
                <span>运动</span>
            </div>
            
            <div>
                <a href="#">
                    <img src="./images/classify/唱歌.png" alt="">                   
                </a>
                <span>唱歌</span>
            </div>
        </div>

        <!-- 美食类 -->
        <div class="h_food">
            <div>
                <img src="./images/classify/美食类.png" alt="">
                <p> 美食类</p>
            </div>
            <div>
                <a href="#">更多</a>
                <img src="./images/classify/箭头.png" alt="">
            </div>
        </div>
        <!-- 美食类图片 -->
        <div class="h_food1">
            <a href="#">
                <img src="./images/classify/美食类1.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/美食类2.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/美食类3.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/美食类4.png" alt="">
            </a>
        </div>

        <!-- 运动类 -->
        <div class="h_food">
            <div>
                <img src="./images/classify/美食类.png" alt="">
                <p> 运动类</p>
            </div>
            <div>
                <a href="#">更多</a>
                <img src="./images/classify/箭头.png" alt="">
            </div>
        </div>
        <!-- 运动类图片 -->
        <div class="h_food1">
            <a href="#">
                <img src="./images/classify/运动类1.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/运动类2.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/运动类3.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/运动类4.png" alt="">
            </a>
        </div>

        <!-- 电影类 -->
        <div class="h_food">
            <div>
                <img src="./images/classify/电影类.png" alt="">
                <p> 电影类</p>
            </div>
            <div>
                <a href="#">更多</a>
                <img src="./images/classify/箭头.png" alt="">
            </div>
        </div>
        <!-- 电影类图片 -->
        <div class="h_food1">
            <a href="#">
                <img src="./images/classify/电影类1.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/电影类2.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/电影类1.png" alt="">
            </a>
            <a href="#">
                <img src="./images/classify/电影类2.png" alt="">
            </a>
        </div>

    </header>
    
    <!-- 导航栏 -->
    <nav>
        <div class="f_nav">
            <div>
                <a href="./首页.html">
                    <img src="./images/classify/导航1.png" alt="">
                </a>
                <a href="./首页.html">首页</a>
            </div>
            <div>
                <a href="#">
                    <img src="./images/classify/导航2.png" alt="">
                </a>
                <a href="#">分类</a>
            </div>
            <div>
                <a href="./发现.html">
                    <img src="./images/classify/导航栏3.png" alt="">
                </a>
                <a href="./发现.html">发现</a>
            </div>
            <div>
                <a href="./我的.html">
                    <img src="./images/classify/导航栏4.png" alt="">
                </a>
                <a href="./我的.html">我的</a>
            </div>
        </div>
    </nav>
</body>
</html>